<!-- 关联弹窗 -->
<!-- 藏品编目 -->
<script setup lang="ts">
import TableView from '@/components/TableView.vue'
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NPagination,
  useMessage,
  NInput,
  NSpace,
  NModal,
  NTooltip,
  type DataTableColumns,
  type SelectOption
} from 'naive-ui'
import { h, ref, reactive, watch, onMounted, type VNode, onDeactivated } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
const message = useMessage()
const route = useRoute()
const props = defineProps({
    eItem:Object,
})
const emit = defineEmits(['close'])
const form = reactive({
    itemName:null,
    assetCode: null, //批次编号
    serialNumber:null,
    version: null, //类型说明
    recipient: null, //领取人
})
const renderOption = ref(({ node, option }: { node: VNode; option: SelectOption }) =>
  h(NTooltip, null, {
    trigger: () => node,
    default: () => option.classificationName
  })
)
const rowKey: any = (e: any) => e.id || ''
const columns: DataTableColumns = [
  {
    title: '正题名',
    key: 'itemName',
    width: '6rem',
    align: 'center'
  },
  {
    title: '馆藏码',
    key: 'assetCode',
    width: '5rem',
    align: 'center'
  },
  {
    title: '流水号',
    key: 'serialNumber',
    width: '5rem',
    align: 'center'
  },
  {
    title: '版本说明',
    key: 'version',
    width: '15rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '编目状态',
    key: 'catalogStatusName',
    align: 'center',
    width: '5rem'
  },
  {
    title: '审核状态',
    key: 'assessStatusName',
    align: 'center',
    width: '5rem'
  },
  {
    title: '领取人',
    key: 'recipient',
    align: 'center',
    width: '5rem'
  },
  {
    title: '领取状态',
    key: 'claimStatus',
    align: 'center',
    render: (e: any) => (e.claimStatus === 0 ? '未领取' : '已领取'),
    width: '5rem'
  },
  {
    title: '操作',
    key: 'action',
    width: '10rem',
    align: 'center',
    fixed: 'right',
    render: (e: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            emit('close');
            router.push({
              path: '/collection/process/makeMenu/menuRelative',
              query: {
                id: props?.eItem?.id,
                type:1,//编目
                relativeId: e.id,
                subItemCode: e?.subItemCode,
                code: props?.eItem?.itemCode,
                batchCode: props?.eItem?.batchCode,
                redirect: router.currentRoute.value.fullPath
              }
            })
          }
        },
        {
          default: () => '关联'
        }
      )
    ]
  }
]
const reset = () => {
  form.itemName = null
  form.assetCode = null
  form.serialNumber = null
  form.version = null
  form.recipient = null
}
//筛选条件
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    queryTableData(true)
  }
})
//表格数据
const tableLoading = ref(false)
const tableData: any = ref()
const queryTableDataBefore = () => {
  queryTableData(true)
}
const queryTableData = async (resetPage = false) => {
  if (resetPage) paginationReactive.page = 1
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'relationPage',
    override: {
      params: {
        ...form,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize
        // key: 1 //1 初编 编目 2 编目审核 3 藏品
      }
    }
  })
  if (error) return message.error(error.message || '请求失败，请稍后再试')
  const tmp: any = res.data
  tableData.value = tmp?.list
  paginationReactive.itemCount = tmp.totalCount
  console.log(paginationReactive.itemCount)
  tableLoading.value = false
}
// const keyUpDown = (e: any) => e.key == 'Enter' && ((paginationReactive.page = 1), queryTableData())
// onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))
// watch(
//   () => route.path,
//   () => {
//     if (route.path == '/collection/process/makeMenu/index') {
//       queryTableData(true)
//       window.addEventListener('keyup', keyUpDown, false) // 回车
//     }
//   },
//   { deep: true, immediate: true }
// )
onMounted(() => {
    queryTableData(true)
})
</script>

<template>
  <TableView class="table">
    <template #form>
      <NForm
        :show-feedback="false"
        label-placement="left"
        style="width: 100%"
      >
      <NSpace justify='space-between'>
        <NSpace justify="start">
          <NFormItem label="正题名:">
            <NInput
              placeholder="请输入"
              v-model:value="form.itemName"
            />
          </NFormItem>
          <NFormItem label="馆藏码:">
            <NInput
              placeholder="请输入"
              v-model:value="form.assetCode"
            />
          </NFormItem>
          <NFormItem
                    label="流水号："
                    path="serialNumber"
                  >
                    <NInput
                      v-model:value="form.serialNumber"
                    />
                  </NFormItem>
         

          <NFormItem label="版本说明:">
            <NInput
              placeholder="请输入"
              v-model:value="form.version"
            />
          </NFormItem>
          <NFormItem label="领取人:">
                        <NInput
                          placeholder="输入领取人"
                          v-model:value="form.recipient"
                        />
                      </NFormItem>
          <NFormItem>
            <NButton
              type="primary"
              style="width: 78px"
              ghost
              @click="queryTableDataBefore()"
            >
              查询
            </NButton>
          </NFormItem>
          <NFormItem>
            <NButton
              style="width: 78px"
              ghost
              type="primary"
              @click="reset()"
            >
              重置
            </NButton>
          </NFormItem>
         
          <!-- </NSpace> -->
        </NSpace>
        <NSpace justify='end'>
          <NButton
            color="#5FB17F"
            @click="
              () =>
             {
                emit('close');
                console.log(props?.eItem)
                 router.push({
              path: '/collection/process/makeMenu/menuRelative',
              query: {
                id: props?.eItem?.id,
                type:1,//编目
                relativeId: null,
                itemTypeCode:props?.eItem?.itemTypeCode,
                subItemCode: props?.eItem?.subItemCode,
                code: props?.eItem?.itemCode,
                batchCode: props?.eItem?.batchCode,
                redirect: router.currentRoute.value.fullPath
              }
            })}
            "
          >
            跳过关联
          </NButton>
      </NSpace>
    </NSpace>
      </NForm>
    
    </template>

    <template #table="props">
      <NDataTable
        v-bind="props"
        :bordered="false"
        :columns="columns"
        :data="tableData"
        min-height="300px"
        :loading="tableLoading"
      />
    </template>

    <template #pagination>
      <NPagination
        show-size-picker
        show-quick-jumper
        :page-sizes="paginationReactive.pageSizes"
        :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page"
        :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange"
        @update:page-size="paginationReactive.onUpdatePageSize"
        :suffix="() => '页'"
      >
        <template #prefix>
          <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
</template>

<style scoped lang="scss">
.table {
  height: 100%;
  padding: 29px 30px 42px;
}
</style>
@/components/ButtonShowH/CreateH
